import React, { useEffect, useState } from 'react'
import style from './Home.module.scss'
import Footer from './components/Footer'
import { useSelector,useDispatch } from 'react-redux'
import { getFood,changeChecked } from '../../store/models/food'
import type { RootState, AppDispatch } from '.././../store'
import classNames from 'classnames'

const Home: React.FC = () => {
  const dispatch:AppDispatch = useDispatch()
  const [curIndex,setCurIndex] = useState(0)
  const foodList = useSelector((state: RootState) => state.food.foodList)
  const selected = useSelector((state: RootState) => state.food.selected)
  console.log(foodList)


  useEffect(() => {
    if(selected.length === 0) {
      dispatch(getFood())
    }
  },[])




  return (
    <div className={style.home}>
        <main>
            <nav>
            {foodList.map((item,index) =>
              <p 
              key={item.name} 
              onClick={() => setCurIndex(index)}
              className={classNames({[style.active]:index === curIndex})}
              >{item.name}</p>
            )}
            </nav>
            <div className={style.list}>
            {foodList[curIndex]?.list.map(item =>
              <div 
              key={item.name} 
              className={classNames(style.listItem,{[style.active]:item.isChecked})}
              onClick={() => {
                dispatch(changeChecked(item.name))
              }}
              >
                <img src={item.imgUrl} alt="" /> 
                <p>{item.name}</p>
              </div>
            )}
            </div>
        </main>
        {selected.length > 0 && <Footer /> }
        
    </div>
  )
}

export default Home